<template>
	<view class="page-make-photo-save flex-column-gap-10">
		<photo-common-info :data="topInfo" />
		<view class="service-info">
			<view class="service-title">
				<text>选择服务</text>
			</view>
			<view class="detail-item" v-for="item in serviceList" :key="item.id" @tap="onServiceChange(item)">
				<view class="flex-between-center">
					<text>{{ item.name }}</text>
					<view class="flex-center">
						<text class="origin-price">{{ item.goldenBean }}金豆</text>
						<text class="mr-4">{{ item.discountGoldenBean }}金豆</text>
						<image class="radio-icon" v-if="service.id === item.id" src="/static/other/radio-checked.svg">
						</image>
						<image class="radio-icon" v-else src="/static/other/radio-uncheck.png"></image>
					</view>
				</view>
				<view class="extra-content" v-if="item.remark">
					<image class="sub-radio-icon mr-4" src="/static/other/radio-checked.svg" />
					<text>{{ item.remark }}</text>
				</view>
			</view>

			<view class="desc">
				<text>*支付成功后，下载的电子照会自动去除水印</text>
			</view>
		</view>

		<view class="pay-box">
			<view class="text-box">
				<text>应付款：</text>
				<text class="amount">{{ payAmount }}金豆</text>
			</view>
			<view class="custom-button" @tap="onPay">
				<u-button type="primary" shape="circle" text="支付并保存"></u-button>
			</view>
		</view>
	</view>
	<custom-pay-popup v-model:show="showPayPopup" :payTypes="['beanPay']" :payAmount="payAmount" @pay="onConfirmPay" />
</template>

<script setup>
	import CustomPayPopup from "@/components/custom-pay-popup/custom-pay-popup.vue";
	import photoCommonInfo from '@/components/photo-common-info/photo-common-info.vue';
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive,
		computed,
	} from "vue";
	import {
		queryPackageApi,
		savePhoto,
	} from '@/common/js/method.js';
	import {
		versatileShowMap,
	} from '@/common/js/data';

	const serviceList = ref([]);
	const detailInfo = ref({});
	const service = ref({});
	const busiType = ref("black-white-coloring");

	const topInfo = computed(() => {
		return {
			name: versatileShowMap[busiType.value].name,
			imageUrl: detailInfo.value.shuiyinUrl,
			imageSize: {
				width: detailInfo.value.width,
				height: detailInfo.value.height,
			},
			fieldList: versatileShowMap[busiType.value].getFieldList(detailInfo.value),
		}
	});

	// 计算支付金额（所有服务的折扣价之和）
	const payAmount = computed(() => {
		if (!service.value.discountGoldenBean) return 0;
		return service.value.discountGoldenBean;
	});


	// 下单接口的recordType字段
	const recordType = computed(() => {
		return versatileShowMap[busiType.value].recordType;
	})
	const onServiceChange = (item) => {
		service.value = item;
	};


	const showPayPopup = ref(false);

	const onPay = () => {
		showPayPopup.value = true;
	};
	// 确认支付(金豆支付)
	const onConfirmPay = async ({
		type,
		callback,
	}) => {
		if(type === 'beanPay') {
			const payload = getBusiParams(type);
			let res = await uni.$request('/api/busi/photo/record/add', payload);
			await savePhoto(detailInfo.value.imageUrl)
			uni.showToast({
				title: '已保存到相册',
			})
			toSuccess();
		}
		
	}
	const getBusiParams = (type) => {
		const payType = { beanPay: 0, wxpay: 1, alipay: 2, toutiao: 3 }
		// 下单接口的recordType字段
		const recordType = versatileShowMap[busiType.value].recordType
		const data = detailInfo.value;
		let params = {
			recordType,
			packageId: service.value.id, //套餐id
			photoSize: data.fileSize, //文件大小
			payType: payType[type], //支付方式，0-金豆，1-微信，2-支付宝，3-抖音，4-银联
			payAmount: payAmount.value,
			imageUrl: data.imageUrl,
			pixelSize: [data.width, data.height].join('*'),
			returnType: busiType.value=== 'sketch-portrait' ? data.photoStyle: undefined, //素描照时候传
			algoType:  busiType.value=== 'manga-photos' ? data.photoStyle: undefined, //漫画照时传
		};
		return params;
	}
	
	const toSuccess = () => {
		setTimeout(() => {
			// 支付成功，跳转结果页（复用证件照制作结果页）
			uni.navigateTo({
				url: `/pages/make-photo/make-photo-save-res`,
			});
		}, 1000);
	}


	// 查询套餐
	// 套餐类型，1-充值套餐，2-保存电子照套餐（证件照），3-冲印邮寄套餐，4-快递方式套餐 5-照片剪辑套餐，6-换底色套餐，7-黑白上色套餐，8-漫画照套餐，9-素描化套餐，10-画质增强套餐，11-证件照打印，12-生活照打印
	const getPackageInfo = async () => {
		// 查询套餐的类型
		const packType = versatileShowMap[busiType.value].packType
		let res = await queryPackageApi([packType])
		serviceList.value = res[0].data.packageList;
		service.value = serviceList.value[0];
	}


	onLoad((params) => {
		busiType.value = params.type;
		const data = JSON.parse(params.data);
		detailInfo.value = {
			...data,
			shuiyinUrl: decodeURIComponent(data.shuiyinUrl), //处理后的水印照片
			imageUrl: decodeURIComponent(data.imageUrl), //处理后的无水印照片
		};
		console.log('onLoad', detailInfo.value)
		getPackageInfo();
	})
</script>

<style lang="less" scoped>
	.page-make-photo-save {
		box-sizing: border-box;
		padding: 10px 16px 113px 16px;
		height: 100vh;
		overflow-y: auto;
		opacity: 1;
		background: rgba(245, 245, 245, 1);

		.detail-item {
			// display: flex;
			// align-items: center;
			// justify-content: space-between;
			/** 文本 */
			font-size: 14px;
			line-height: 20px;
			color: rgba(56, 56, 56, 1);
		}

		.service-info {
			border-radius: 8px;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.02);
			padding: 16px 16px 16px 16px;
			display: flex;
			flex-direction: column;
			gap: 15px;

			.service-title {
				font-size: 16px;
				font-weight: 700;
				line-height: 24px;
				color: rgba(56, 56, 56, 1);
			}

			.extra-content {
				margin-top: 5px;
				font-size: 12px;
				line-height: 18px;
				color: rgba(69, 144, 229, 1);
				display: flex;
				align-items: center;
				gap: 5px;
			}

			.sub-radio-icon {
				width: 14px;
				height: 14px;
			}
		}

		.share-info {
			gap: 15px;

			.share-item {
				flex: 1;
				border-radius: 8px;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.02);
				padding: 5px 16px;
				display: flex;
				position: relative;
				border: 0;
				text-align: left;
			}

			.share-item-title {
				font-size: 14px;
				font-weight: 700;
				line-height: 20px;
				color: rgba(56, 56, 56, 1);
			}

			.share-item-desc {
				font-size: 12px;
				line-height: 18px;
				color: rgba(56, 56, 56, 1);
			}

			.share-item-children {
				font-size: 12px;
				line-height: 18px;
				color: rgba(166, 166, 166, 1);
			}

			.share-icon {
				position: absolute;
				right: 0;
				top: 0;
				width: 114rpx;
				height: 32rpx;
			}

			.free-text {
				font-size: 16px;
				font-weight: 700;
				letter-spacing: 0px;
				line-height: 24px;
				color: rgba(212, 48, 48, 1);
			}
		}

		.save-multi-background {
			border-radius: 8px;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.02);
			padding: 16px 16px 16px 16px;
			display: flex;
			flex-direction: column;
			gap: 15px;

			.background-list {
				gap: 10px;
				display: flex;

				.background-item {
					height: 16px;
					width: 16px;
					border-radius: 100%;
					border: 1px solid rgba(229, 229, 229, 1);
				}
			}
		}

		.pay-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			box-sizing: border-box;
			height: 212rpx;
			border-radius: 32rpx 32rpx 0 0;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px -4rpx 12rpx rgba(0, 0, 0, 0.02);
			padding: 32rpx 32rpx 68rpx 32rpx;
			position: fixed;
			left: 0;
			bottom: 0;

			.text-box {
				font-size: 18px;
				line-height: 27px;
				color: rgba(0, 0, 0, 1);

				.amount {
					font-weight: 700;
					color: rgba(69, 145, 230, 1);
				}
			}
		}
	}
</style>